import * as React from 'react';
import {NavLink, Outlet} from "react-router-dom";
import "./style.css"

export default class Nav extends React.Component {
    render() {
        function computedClassName({isActive}) {
            // console.log(isActive)
            return isActive ? 'btn route_active' : 'btn'
        }

        return (// <div>
            //     <ul>
            //         <li><Link to="/">home链接跳转==a标签</Link></li>
            //         {/*<a href="#/home">home -a</a>*/}
            //         <li><Link to="/main">main链接跳转==a标签</Link></li>
            //         {/*<a href="#/main">mian -a</a>*/}
            //         <li><Link to="/main/ucenter">ucenter链接跳转==a标签</Link></li>
            //     </ul>
            // </div>
            <div>
                <ul>
                    <li><NavLink exact="true" to="/" className={computedClassName}>home链接跳转==a标签</NavLink></li>
                    {/*<a href="#/home">home -a</a>*/}
                    <li><NavLink exact="true" to="main?id=haha"
                                 className={computedClassName}>main链接跳转==a标签</NavLink>
                    </li>
                    {/*<a href="#/main">mian -a</a>*/}
                    {/*<li><NavLink to="main/ucenter" className={computedClassName}>ucenter链接跳转==a标签</NavLink></li>*/}
                    <li><NavLink exact="true" to={{
                        pathname: "/main/ucenter",
                        search: "?sort=name",
                        hash: "#the-hash",
                        state: {fromDashboard: 'flag'}
                    }} className={computedClassName}>ucenter链接跳转==a标签</NavLink></li>
                    <li><NavLink exact="true" to={{
                        pathname: "/promptdemo", search: "?sort=name", hash: "#the-hash", state: {fromDashboard: 'flag'}
                    }} className={computedClassName}>promptdemo</NavLink></li>

                    <li><NavLink exact="true" to={{
                        pathname: "/Book", search: "?sort=name", hash: "#the-hash", state: {fromDashboard: 'flag'}
                    }} className={computedClassName}>book</NavLink></li>

                    {/*<Outlet/>*/}
                </ul>
            </div>

        );
    };
};
